<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { useRouter } from 'vue-router'
import axios from 'axios';
const router = useRouter()
const collectInfo = ref([])
let getCollectInfo = async () => {
    let { data: { data } } = await axios.get('http://localhost:3000/yg/getCollect')
    collectInfo.value = data
}
onMounted(() => {
    getCollectInfo()
})
</script>
<template>
    <div id="Collect">
        <div class="top">
            <div style="margin-left: 10px">
                <van-icon name="arrow-left" size="20px" @click="router.go(-1)" />返回
            </div>
            <h3>收藏夹</h3>
        </div>
        <div class="main">
            <div class="box" v-for="item in collectInfo" :key="item._id" @click="router.push(`/home/xq?id=${item._id}`)">
                <div class="box-left">
                    <img :src="item.img[0]" class="fm" alt="">
                </div>
                <div class="box-right">
                    <p style="margin-top: 5px;">{{ item.name }}</p>
                    <p style="margin-top: 10px;">{{ item.c_id.name[0] }}·{{ item.roomNum }}居{{ item.badNum }}床{{
                        item.visitorNum
                        }}人·{{ item.home_km }}</p>
                    <p style="color: #FF9933;font-size: 20px;margin-top: 10px;">￥{{ item.price }}</p>
                </div>

            </div>
        </div>
    </div>
</template>



<style scoped lang="scss">
* {
    padding: 0;
    margin: 0;
}

body {
    background-color: #F4F6F9;
}

#Collect {
    width: 100%;
    height: 100%;

    .top {
        width: 100%;
        height: 50px;
        display: flex;
        align-items: center;
        background-color: #fff;

        h3 {
            margin-left: 140px;
        }
    }

    .main {
        width: 100%;
        height: 800px;
        background-color: #F4F6F9;
        overflow: hidden;

        .box {
            width: 90%;
            height: 100px;
            margin: 0 auto;
            margin-top: 20px;
            background-color: #fff;
            display: flex;

            .box-left {
                width: 100px;
                height: 100px;
                box-shadow: 5px 5px 10px 0px rgba(0, 0, 0, 0.2);
                border-radius: 10px;

                .fm {
                    width: 100px;
                    height: 100px;
                    border-top-left-radius: 10px;
                    border-bottom-left-radius: 10px;
                }
            }

            .box-right {
                width: 100%;
                height: 100px;
                padding-left: 10px;
            }
        }
    }
}
</style>